<template>
    <div class="post">
        <a-card title="向其他平台发布询价信息" style="width: 100%;">
            <template #extra><a href="#">more</a></template>
            <div class="platforms">
                <div class="platform"></div>
                <div class="platform"></div>
                <div class="platform"></div>
                <div class="platform"></div>
                <div class="platform"></div>
                <div class="platform"></div>
            </div>
        </a-card>
    </div>
    <div class="policy">
        <a-card title="政策文件" style="width: 100%;">
            <template #extra><a href="#">more</a></template>
            <a-table :columns="columns" :data-source="state.data" bordered style="width: 100%;">
                <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'name'">
                    <a>{{ text }}</a>
                </template>
                </template>
            </a-table>
        </a-card>
    </div>
    <div class="report">
        <a-card title="行业报告" style="width: 100%;">
            <template #extra><a href="#">more</a></template>
            <a-table :columns="columns1" :data-source="state.data" bordered style="width: 100%;">
                <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'name'">
                    <a>{{ text }}</a>
                </template>
                </template>
            </a-table>
        </a-card>
    </div>
    <div class="research">
        <a-card title="热点研究" style="width: 100%;">
            <template #extra><a href="#">more</a></template>
            <a-table :columns="columns1" :data-source="state.data" bordered style="width: 100%;">
                <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'name'">
                    <a>{{ text }}</a>
                </template>
                </template>
            </a-table>
        </a-card>
    </div>
    <div class="stantard">
        <a-card title="标准图集" style="width: 100%;">
            <template #extra><a href="#">more</a></template>
            <a-table :columns="columns2" :data-source="state.data" bordered style="width: 100%;">
                <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'name'">
                    <a>{{ text }}</a>
                </template>
                </template>
            </a-table>
        </a-card>
    </div>
    <div class="discussion">
        <a-card title="吉材讨论组" style="width: 100%;">
            <template #extra><a href="#">more</a></template>
            <a-table :columns="columns3" :data-source="state.data" bordered style="width: 100%;">
                <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'name'">
                    <a>{{ text }}</a>
                </template>
                </template>
            </a-table>
        </a-card>
    </div>
</template>

<script setup>
    import { reactive } from 'vue'
    const state = reactive({})

    const columns = [
    {
        title: '标题',
        dataIndex: 'title',
    },]
    const columns1 = [
    {
        title: '标题',
        dataIndex: 'title',
    },
    {
        title: '发布时间',
        dataIndex: 'time',
    }]
    const columns2 = [
    {
        title: '标题',
        dataIndex: 'title',
    },
    {
        title: '分类',
        dataIndex: 'category',
    }]
    const columns3 = [
    {
        title: '发帖人',
        dataIndex: 'author',
    },
    {
        title: '标题',
        dataIndex: 'title',
    },
    {
        title: '发布时间',
        dataIndex: 'time',
    }]

    state.data = []
</script>

<style scoped>
.post{
    width: 80%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.policy{
    width: 80%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.report{
    width: 80%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.research{
    width: 80%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.stantard{
    width: 80%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.discussion{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.platforms {
    margin: 0 auto;
    width: 90%;
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between; /* 两行元素等间距 */
}
.platform{
    width: calc(33% - 10px); /* 每行两个元素，减去间距 */
    margin-bottom: 20px; /* 垂直间距 */
    background-color: #f0f0f0;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    height: 200px;
}
</style>